<template>
	<view>
		<view style="position: fixed;width: 100%;top: 103rpx;">
			<view class="back" @click="back">
				<view class="backicon"></view>
			</view>
			<view class="toptitle">
				<text>码上考勤</text>
			</view>
		</view>
		<view style="width: 100%;position: fixed;top: 190rpx;">
			<!-- 课程信息 -->
			<view style="width: 100%;margin: 0 auto;" v-show="isSchedule">
				<view v-for="(item,index) in scheduleList" :key="index" class="schedule-info"
					:style="{'background-color':item.colour}">
					<view style="width: 76%;float: left;font-size: 30rpx;font-weight: bold;">
						<view style="margin-bottom: 8px;font-size: 40rpx;">{{item.coursename}}</view>
						<view style="margin-bottom: 8px;">{{item.classtime}}节 {{item.classroom}}</view>
						<view style="margin-bottom: 8px;">{{item.cname}}</view>
						<view style="margin-bottom: 8px;">共{{item.stuCount}}人</view>
						<!-- <view style="margin-bottom: 8px;">已到 100 人  未到<text style="color: red;padding-left: 5px;padding-right: 5px;">2</text>人</view> -->
					</view>
					<view style="width: 20%;float: left;margin-top: 8%;">
						<u-button v-if="item.attId" disabled="disabled"  type="primary"
							text="已考勤"></u-button>
						<u-button v-else type="primary" text="开始考勤" @click="openQrCheck(item)"></u-button>
					</view>
					<view style="clear: both;"></view>
				</view>
			</view>
			<!-- 考勤界面 -->
			<view style="width: 100%;margin: 0 auto;" v-show="isQrCheck">
				<view style="font-size: 25px;text-align: center;font-weight: bold;">课堂暗号 {{key}}</view>
				<view style="font-size: 23px;color: red;text-align: center;font-weight: bold;"
					v-html="minutes + '分' + seconds + '秒'"></view>

				<view class="charts-box">
					<!-- canvas2d="true" -->
					<qiun-data-charts canvas2d="true" type="arcbar" :opts="opts" :chartData="chartData" />
				</view>

				<view style="width: 100%;margin: 0 auto;margin-bottom:10%;margin-top: 5%;">
					<view style="width: 38%;margin-left: 30%;">
						<button @click="toggle('bottom')" type="default">考勤详细信息</button>
					</view>
				</view>
				<view style="width: 100%;margin: 0 auto;">
					<view style="width: 80%;margin-left: 10%;">
						<button type="warn" @click="submitAttendance()">结束考勤</button>
					</view>
				</view>

				<uni-popup ref="popup" background-color="#fff">
					<view style="height: 500px;">
						<view style="width:65%;margin: 0 auto;margin-top: 10px;">
							<u-subsection :list="items" @change="changeSubsection" :fontSize="18"
								:current="current"></u-subsection>
						</view>
						<view style="margin-top:10px;" v-if="current == 0">
							<scroll-view scroll-y style="height: 460px;">
								<view style="width: 96%;margin: 0 auto;;border-bottom: 1px dotted #DCDFE6;
								padding-bottom: 5px;margin-bottom: 5px;" v-for="(student, index) in allStudents">
									<view v-if="student.status == 1">
										<view class="stuent_info">
											<view style="float: left;">
												<u--image :showLoading="true" :lazy-load="true" :src="student.picUrl"
													width="60px" height="60px" style="margin-left: 10px;"
													shape="circle"></u--image>
											</view>
											<view style="height: 60px;">
												<view>
													<view>
														<view style="float: left;">
															<text>{{student.sname}}</text>
														</view>
														<view style="display: inline-block;float: right;margin-right: 20rpx;">
															<text v-if="student.status == 1" style="color: #19BE6B;font-weight: bold;">已到</text>
															<text v-if="student.status == 2" style="color: #4786FF;font-weight: bold;">请假</text>
															<text v-if="student.status == 3" style="color: #FFA647;font-weight: bold;">迟到</text>
															<text v-if="student.status == 4" style="color: #C4C4C3;font-weight: bold;">早退</text>
															<text v-if="student.status == 5" style="color: #FE315D;font-weight: bold;">旷课</text>
														</view>
													</view>
												</view>
												<view>
													<text v-if="student.status == 2" @click="openPop(student)">请假信息</text>
												</view>
											</view>
											<view style="margin-left: 6rpx;margin-top: 12rpx;">
												<button @click="modifyStatus(student, 4)" size="mini" class="btn-u" plain="true"  
													style="color: #C4C4C3;border: 4rpx solid #C4C4C3;border-radius: 25rpx;" 
													hover-class="btn-hover">早退</button>
												<button @click="modifyStatus(student, 3)" size="mini" class="btn-u" plain="true"
													style="color: #FFA647;border: 4rpx solid #FFA647;border-radius: 25rpx;" 
													hover-class="btn-hover">迟到</button>
												<button @click="modifyStatus(student, 2)" size="mini" class="btn-u" plain="true"
													style="color: #4786FF;border: 4rpx solid #4786FF;border-radius: 25rpx;" 
													hover-class="btn-hover">请假</button>
												<button @click="modifyStatus(student, 1)" size="mini" class="btn-u" plain="true"
													style="color: #19BE6B;border: 4rpx solid #19BE6B;border-radius: 25rpx;" 
													hover-class="btn-hover">已到</button>
												<button @click="modifyStatus(student, 5)" size="mini" class="btn-u" plain="true"
													style="color: #FE315D;border: 4rpx solid #FE315D;border-radius: 25rpx;" 
													hover-class="btn-hover">旷课</button>	
											</view>
										</view>
										<!-- <u-row>
											<u-col span="3">
												<u--image :showLoading="true" :lazy-load="true" :src="student.picUrl"
													width="60px" height="60px" style="margin-left: 10px;"
													shape="circle"></u--image>
											</u-col>
											<u-col span="9">
												<u-row style="margin-bottom: 5px;"><u-col span="9">
														<view>{{student.sname}}</view>
													</u-col></u-row>
												<u-row v-if="student.status == 2" @click="openPop(student)"><u-col span="9">请假信息</u-col></u-row>
											</u-col>
										</u-row> -->
									</view>

								</view>
							</scroll-view>

						</view>
						<view style="margin-top:10px;" v-if="current == 1">
							<scroll-view scroll-y style="height: 460px;">
							
								<view style="width: 96%;margin: 0 auto;;border-bottom: 1px dotted #DCDFE6;
								padding-bottom: 5px;margin-bottom: 5px;" v-for="(student, index) in allStudents">
									<view v-if="student.status != 1">
										<view class="stuent_info">
											<view style="float: left;">
												<u--image :showLoading="true" :lazy-load="true" :src="student.picUrl"
													width="60px" height="60px" style="margin-left: 10px;"
													shape="circle"></u--image>
											</view>
											<view style="height: 60px;">
												<view>
													<view>
														<view style="float: left;">
															<text>{{student.stuid + "  " + student.sname}}</text>
														</view>
														<view style="display: inline-block;float: right;margin-right: 20rpx;">
															<text v-if="student.status == 1" style="color: #19BE6B;font-weight: bold;">已到</text>
															<text v-if="student.status == 2" style="color: #4786FF;font-weight: bold;">请假</text>
															<text v-if="student.status == 3" style="color: #FFA647;font-weight: bold;">迟到</text>
															<text v-if="student.status == 4" style="color: #C4C4C3;font-weight: bold;">早退</text>
															<text v-if="student.status == 5" style="color: #FE315D;font-weight: bold;">旷课</text>
														</view>
													</view>
												</view>
												<view>
													<text v-if="student.status == 2" @click="openPop(student)">请假信息</text>
												</view>
											</view>
											<view style="margin-left: 6rpx;margin-top: 12rpx;">
												<button @click="modifyStatus(student, 4)" size="mini" class="btn-u" plain="true"  
													style="color: #C4C4C3;border: 4rpx solid #C4C4C3;border-radius: 25rpx;" 
													hover-class="btn-hover">早退</button>
												<button @click="modifyStatus(student, 3)" size="mini" class="btn-u" plain="true"
													style="color: #FFA647;border: 4rpx solid #FFA647;border-radius: 25rpx;" 
													hover-class="btn-hover">迟到</button>
												<button @click="modifyStatus(student, 2)" size="mini" class="btn-u" plain="true"
													style="color: #4786FF;border: 4rpx solid #4786FF;border-radius: 25rpx;" 
													hover-class="btn-hover">请假</button>
												<button @click="modifyStatus(student, 1)" size="mini" class="btn-u" plain="true"
													style="color: #19BE6B;border: 4rpx solid #19BE6B;border-radius: 25rpx;" 
													hover-class="btn-hover">已到</button>
												<button @click="modifyStatus(student, 5)" size="mini" class="btn-u" plain="true"
													style="color: #FE315D;border: 4rpx solid #FE315D;border-radius: 25rpx;" 
													hover-class="btn-hover">旷课</button>	
											</view>
										</view>
										<!-- <u-row>
											<u-col span="3">
												<u--image :showLoading="true" :lazy-load="true" :src="student.picUrl"
													width="60px" height="60px" style="margin-left: 10px;"
													shape="circle"></u--image>
											</u-col>
											<u-col span="9">
												<u-row style="margin-bottom: 5px;"><u-col span="9">
														<view>{{student.sname}}</view>
													</u-col></u-row>
												<u-row v-if="student.status == 2" @click="openPop(student)"><u-col span="9">请假信息</u-col></u-row>
											</u-col>
										</u-row> -->
									</view>
									<view v-else style="display:none">
										<slot/>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</uni-popup>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		HNIT_URL,
		IDENTITY,
		USERNAME
	} from '../../../constants';
	export default {
		data() {
			return {
				attId: 0,
				records: [], // 考勤记录
				scrollTop: 0,
				username: '', //工号
				old: {
					scrollTop: 0
				},
				scheduleList: [], //今天课程信息
				isSchedule: true, //是否显示课程界面
				isQrCheck: false, //考勤界面
				current: 0, //选项卡
				key: 0, // 上课暗号
				clockingCls: [], // 正在考核的班级
				allArrived: 0, // 已到学生数
				studentSum: 0, // 总共有多少学生
				allStudents: [],
				label: "已到学生",
				allStudents: [],
				items: ['已签到(1)', '未签到(4)'],
				timeOut: true, // 计时
				minutes: 6,
				seconds: '00',
				showLeave: false,
				src: "https://cdn.uviewui.com/uview/album/1.jpg",
				leaveInfo:{
					time: "",
					reason: "",
					imagepath: 'https://cdn.uviewui.com/uview/album/1.jpg'
				},
				connectedFlag: false,
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['arcbar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "0人",
						fontSize: 35,
						color: "#2fc25b"
					},
					subtitle: {
						name: "进入课堂",
						fontSize: 25,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 12,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				}
			}
		},
		onShow() {
			//缓存中的teachername
			this.username = uni.getStorageSync(USERNAME);
		},
		onLoad(res) {
			/* if(this.clockingCls.length > 0){
				console.log("aaaaa");
				
			} */
			/* wx.enableAlertBeforeUnload({ //开启页面退出时的对话框
				message: "您还未保存信息，是否退出当前页面？",
				success: function(res) {	
					// console.log("成功：", res);
					this.submitAttendance();
					return true;
				},
				fail: function(err) {	
					// console.log("失败：", err);		
					return false;
				},
			}); */
			
		
		},
		methods: {
			// 提交考勤记录
			submitAttendance(){
				if(this.clockingCls.length <= 0){
					return uni.showToast({
						title: "暂无班级进行考勤",
						icon:"none",
						duration: 2000
					})
				}
				if(this.attId != 0){
					return uni.showToast({
						title: "该课程已考勤完毕，修改请到手动考勤中修改",
						icon:"none",
						duration: 2000
					})
				}
				let len = this.scheduleList.length;
				for (let i = 0; i < len; ++i){
					let params = {};
					params.classId = this.scheduleList[i].id
					params.arrivecount = this.scheduleList[i].arrivecount
					params.signmethod = 1
					params.uuid = this.key
					this.$request.post(HNIT_URL + "wx/attendance/add/" + this.username, params).then(res => {
						if(res.code != 1){
							return uni.showToast({
								title: res.msg,
								icon:"none",
								duration: 2000
							})
						}
						this.attId = res.data;
							this.records = []
							this.allStudents.forEach(student => {
								if (this.scheduleList[i].id == student.cid){
									let record = {
										attid : this.attId,
										stuid : student.stuid,
										leaveId : student.leaveId,
										status : student.status
									}
									this.records.push(record);
								}
							})
							uni.request({
									url: HNIT_URL + "wx/records/add/" + this.username,
									method: 'post',
									data: this.records,
									header: {
										'Content-Type': 'application/json'
									}
								}).then(res => {
									if (res.data.code == 1){
										uni.showToast({
											title: res.data.msg,
											icon:"none",
											duration: 2000
										})
									}else {
										uni.showToast({
											title: res.data.msg,
											icon:"none",
											duration: 2000
										})
									}
								})
							
							})
				}
			},
			// 修改学生考勤状态
			modifyStatus(stu, status){
				if(stu.status == status){
					return;
				}
				this.allStudents.forEach(item=>{
					if (item.stuid == stu.stuid){
						item.status = status;
						this.scheduleList.forEach(cls=>{
							if (item.cid == cls.id){
								if (status == 1){
									cls.allArrived ++;
									this.allArrived++;
								}else{
									cls.allArrived = cls.allArrived <= 0 ? 0 : cls.allArrived --;
									this.allArrived = this.allArrived <= 0 ? 0 : this.allArrived --;
								}
							}

						})
					}
				})
				this.$request.get(HNIT_URL + "wx/attendance/modify/info/" + this.key + "/" + stu.stuid + "/" + stu.sname + "/" + stu.cid).then(res => {
					console.log(res.data);
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000,
						mask: false
					});
				})
				this.opts.title.name = this.allArrived + '人';
				this.items[0] = "已签到(" + this.allArrived + ")"
				this.items[1] = "未签到(" + (this.studentSum - this.allArrived) + ")";
				this.chartData.series[0].data = this.allArrived / this.studentSum;
			},
			// 剩余时间倒计时
			timeout() {
				setInterval(() => {
					if (this.minutes == 0 && this.seconds == 0) {
						// 到时间停止调用
						this.timeOut = false;
						this.attId = -1;
						clearInterval();
					} else if (this.seconds != '00') {
						this.seconds = parseInt(this.seconds) - 1;
						if (this.seconds < 10) {
							this.seconds = '0' + this.seconds;
						}
					} else if (this.minutes != 0) {
						this.minutes = this.minutes - 1;
						this.seconds = 59;
					}
				}, 1000)
			},
			// 建立连接
			connect() {
				let path = "ws://" + HNIT_URL.substring(HNIT_URL.indexOf("//") + 2) + "wx/clock/" + this.key;
				// 连接
				wx.connectSocket({
					url: path
				})
				// 监听
				wx.onSocketOpen((result) => {
					this.connectedFlag = true;
					console.log("websocket连接已打开");
				})
				// 失败监控
				wx.onSocketError((result) => {
					console.log("websocket连接失败", result);
				})
				// 监听服务器的数据返回
				wx.onSocketMessage((res) => {
					console.log("服务器的数据返回", res);
					// 如果开头是‘{’的就是扫码成功
					if (res.data[0] == '{') {
						let data = JSON.parse(res.data)
						this.allStudents.forEach(student => {
							if (data.stuid == student.stuid) {
								student.status = 1;
								if (data.image) {
									// 拍照图片路径
									student.image = data.image;
								}
							}
						})
						// 查询已到人数
						this.scheduleList.forEach(cls => {
							if (cls.id == data.cid && data.status == "已到") {
								data.cname = cls.cname;
								cls.allArrived++;
								this.allArrived++;
							}
						})
						this.opts.title.name = this.allArrived + '人';
						this.items[0] = "已签到(" + this.allArrived + ")"
						this.items[1] = "未签到(" + (this.studentSum - this.allArrived) + ")";
						this.chartData.series[0].data = this.allArrived / this.studentSum;
					}
				})
			},
			//滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			back() {
				if(this.clockingCls.length > 0){
					wx.showModal({
					  title: '提示',
					  content: '您当前有班级正在考勤，退出默认提交',
					  success (res) {
						if (res.confirm) {
						  if (uni.getStorageSync(IDENTITY) == 4) {
						  	uni.reLaunch({
						  		url: '/pages/manage/home/index'
						  	});
						  } else {
						  	uni.reLaunch({
						  		url: '/pages/teacher/home/index'
						  	});
						  }
						  this.submitAttendance();
						} else if (res.cancel) {
						  return;
						}
					  }					
					})
				}else {
					if (uni.getStorageSync(IDENTITY) == 4) {
						uni.reLaunch({
							url: '/pages/manage/home/index'
						});
					} else {
						uni.reLaunch({
							url: '/pages/teacher/home/index'
						});
					}
				}
			},
			// 查询是否有过考勤记录，有过考勤记录就不能扫码考勤
			queryAttId(){
				if(this.scheduleList.length <= 0){
					return;
				}
				let params = {
					classId: this.scheduleList[0].id
				};
				this.$request.get(HNIT_URL + "wx/attendance/getAttId/" + this.username, params).then(res=>{
					if(res.data){
						this.attId = res.data
					}
				})
			},
			findSystemUerTodayAllSchedule() {
				//查询当前老师今天所有课程
				let params = {
					"username": this.username
				};
				this.$request.post(HNIT_URL + "wx/schedule/findsutas", params).then(res => {
					//uni.showToast({title: res.msg,icon: "none",duration: 2000,mask: true});
					//登录成功之后
					if (res.code == 1) {
						this.scheduleList = res.data;
						this.scheduleList.forEach(item => {
							item.arrivecount = 0;
						})
						this.queryAttId();
					}
				}, err => {
					return uni.showToast({
						title: err.msg,
						icon: 'none',
						duration: 3000,
						mask: true
					});
				});
			},
			openQrCheck(item) {
				// 判断之前是否考勤
				if(this.attId != 0){
					return uni.showToast({
						title: "该课程已考勤完毕，修改请到手动考勤中修改",
						icon:"none",
						duration: 2000
					})
				}
				//开始考勤
				this.isSchedule = false;
				this.isQrCheck = true;
				if(this.clockingCls.length <= 0){
					this.timeout();
				}
				this.getStudents(item);
			},
			getServerData() {
				setTimeout(() => {
					let res = {
						series: [{
							name: "进入课堂",
							color: "#2fc25b",
							data: 0
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			toggle(type) {
				if(this.studentSum == 0){
					return uni.showToast({
						title: "没有班级正在考勤!",
						icon: 'none',
						duration: 3000,
						mask: false
					});
				}
				this.type = type
				this.$refs.popup.open(type);
			},
			changeSubsection(index) {
				this.current = index;
			},
			// 查询当前上课的学生
			getStudents(item) {
				let ids = "";
				console.log(item.ids);
				if(item.ids != null){
					ids = item.ids;
				}else {
					ids = item.id + "";
				}
				console.log(ids);
				let cids = ids.split(",");
				let toCids = [];
				// 去除已经查询过的班级
				for(let i = 0; i < cids.length; ++i){
					let flag = true;
					for(let j = 0; j < this.clockingCls.length; ++j){
						if(cids[i] == this.clockingCls[j]){
							flag = false;
							continue;
						}
					}
					// 没有被查询过的
					if(flag){
						toCids.push(cids[i]);
						// 添加到被查询过的班级中
						this.clockingCls.push(cids[i]);
					}
				}
				if(toCids.length <= 0){
					return uni.showToast({
						title: "该班级正在考勤!",
						icon: 'none',
						duration: 3000,
						mask: false
					});
				}
				uni.request({
					url: HNIT_URL + "wx/attendance/produceKey/" + this.key + "/" + this.username,
					method: 'post',
					data: toCids,
					header: {
						'Content-Type': 'application/json'
					},
				}).then(res => {
					this.key = res.data.data.key;
					if(!this.connectedFlag){
						this.connect();
					}
					let map = res.data.data.list;
					for (let name in map) {
						let data = name.split("-");
						if (data.length > 1) {
							let cid = data[0];
							let cname = '';
							let stuid = data[1]
							let sname = data[2];
							let value = map[name].split("-");
							let status = value[0];
							let image = "";
							let leaveId = value[1];
							let picUrl = value[2];
							if (!picUrl || picUrl == 'null') {
								picUrl =
									"https://tse2-mm.cn.bing.net/th/id/OIP-C.Z2PCl0p3QAnc_mAMhhgBTAHaHa?w=202&h=203&c=7&r=0&o=5&dpr=1.5&pid=1.7"
							}
							this.scheduleList.forEach(cls => {
								if (cls.id == cid) {
									cname = cls.cname;
									if (status == 1) {
										cls.allArrived++;
										this.allArrived++;
									}
								}
							})
							let student = {
								stuid: stuid,
								sname: sname,
								cid: cid,
								cname: cname,
								status: status,
								leaveId: leaveId,
								image: image,
								picUrl: picUrl
							}
							this.studentSum++;
							this.allStudents.push(student)
						}
					}
					this.opts.title.name = this.allArrived + '人';
					this.items[0] = "已签到(" + this.allArrived + ")"
					this.items[1] = "未签到(" + (this.studentSum - this.allArrived) + ")";
					this.chartData.series[0].data = this.allArrived / this.studentSum;
				})
			},
		},
		mounted() {
			this.findSystemUerTodayAllSchedule();
			this.getServerData();
		}
	}
</script>

<style>
	 /* 考勤状态按钮 */
	.btn-u{
		display: inline-block;
		margin-left: 10rpx;
		font-weight: bold;
	}
	.data-v-fe947b98 {
		z-index: 99;
	}

	.data-v-fe947b98 canvas {
		z-index: 99;
	}

	page {
		background-color: #eeeeee;
	}

	.backicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 5rpx;
		margin-left: 12rpx;
	}

	.back {
		width: 80rpx;
		height: 60rpx;
		margin-left: 20rpx;
		border-radius: 80rpx;
		border: 1rpx #c6c6c6 solid;
		backdrop-filter: blur(5px);
		/* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
		float: left;
	}

	.toptitle {
		color: #000000;
		font-size: 50rpx;
		line-height: 30px;
		font-family: FZSuXSLSJW;
		width: 100px;
		float: left;
		margin-left: 20%;
	}

	.schedule-info {
		width: 93%;
		padding: 8px;
		border-radius: 8px;
		margin-left: 1%;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
	}

	.charts-box {
		width: 80%;
		height: 200px;
		margin: 0 auto;
		margin-top: 30px;
	}
</style>